<template>
  <a-card title="个人设置">
    <a-form :form="form">
      <a-row :gutter="20">
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
          <a-form-item
            label="工号"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-input disabled v-decorator="['uuid']" />
          </a-form-item>

          <a-form-item
            label="昵称"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-input
              placeholder="请输入昵称"
              v-decorator="[
                'nickName',
                { rules: [{ required: true, message: '请输入昵称' }] },
              ]"
            />
          </a-form-item>

          <a-form-item
            label="出生年月"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-date-picker
              placeholder="请输入出生年月"
              v-decorator="['birthday']"
              style="width: 100%"
            />
          </a-form-item>

          <a-form-item
            label="性别"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-switch
              v-decorator="[
                'gender',
                { valuePropName: 'checked', initialValue: true },
              ]"
              un-checked-children="女"
              checked-children="男"
            />
          </a-form-item>

          <a-form-item
            label="籍贯"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-tree-select
              :tree-data="nationalitys"
              tree-default-expand-all
              v-decorator="['nationality']"
              placeholder="请选择籍贯"
              style="width: 100%"
            >
            </a-tree-select>
          </a-form-item>

          <a-form-item
            label="毕业院校"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-select
              v-decorator="['education']"
              placeholder="请选择毕业院校"
              style="width: 100%"
            >
              <a-select-option
                v-for="item in educations"
                :key="item.id"
                :value="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>

          <a-form-item
            label="学位"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-select
              v-decorator="['academicDegree']"
              placeholder="请选择学位"
              style="width: 100%"
            >
              <a-select-option
                v-for="item in academicDegrees"
                :key="item.id"
                :value="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>

          <a-form-item
            label="邮箱"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-input placeholder="请输入邮箱" v-decorator="['email']" />
          </a-form-item>

          <a-form-item
            label="手机电话"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-input
              placeholder="请输入手机电话"
              v-decorator="['mobilePhone']"
            />
          </a-form-item>

          <a-form-item
            label="办公电话"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-input
              placeholder="请输入办公电话"
              v-decorator="['officePhone']"
            />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
          <a-form-item
            label="头像"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <img-upload
              :fileList="fileList"
              @uploadCallBack="imgUploadCallBack"
            />
          </a-form-item>

          <a-form-item
            label="简介"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-textarea
              v-decorator="['descption']"
              placeholder="请输入简介"
              :rows="4"
            />
          </a-form-item>

          <a-form-item
            label="所属角色"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input disabled v-decorator="['roleName']" />
          </a-form-item>
          <a-form-item
            label="所属部门"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input disabled v-decorator="['organizeName']" />
          </a-form-item>

          <a-form-item
            label="所属岗位"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input disabled v-decorator="['postationName']" />
          </a-form-item>

          <a-form-item
            label="当前状态"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-switch
              disabled
              v-decorator="[
                'status',
                { valuePropName: 'checked', initialValue: true },
              ]"
              un-checked-children="冻结"
              checked-children="正常"
            />
          </a-form-item>

          <a-form-item
            label="投放开关"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-switch
              disabled
              v-decorator="[
                'isPush',
                { valuePropName: 'checked', initialValue: true },
              ]"
              un-checked-children="关闭"
              checked-children="开启"
            />
          </a-form-item>

          <a-form-item
            label="登录总次数"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input disabled v-decorator="['loginTotalCount']" />
          </a-form-item>

          <a-form-item
            label="上次登录时间"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input disabled v-decorator="['lastLoginTime']" />
          </a-form-item>

          <a-form-item
            label="上次登录IP地址"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-input disabled v-decorator="['lastLoginIp']" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <footer-tool-bar>
      <a-button
        type="primary"
        @click="handleSubmit"
        block
        >保存</a-button
      >
    </footer-tool-bar>
  </a-card>
</template>

<script>
import imgUpload from "_c/imgUpload";
import footerToolBar from "@/components/footerToolbar";
import { getSysAdmin, updateSysAdmin } from "@/api/sys/identity/sysAdmin";
import { queryDicSelect, queryDicTreeSelect } from "@/api/sys/system/dic";
export default {
  components: {
    imgUpload,
    footerToolBar,
  },
  data() {
    return {
      // 显示描述宽度
      labelCol: { md: { span: 5 }, xs: { span: 24 }, sm: { span: 12 } },
      // 输入框宽度
      wrapperCol: { md: { span: 16 }, xs: { span: 24 }, sm: { span: 12 } },
      nationalitys: [],
      academicDegrees: [],
      educations: [],
      form: this.$form.createForm(this),
      entity: {},
      // 图片上传
      fileList: [],
    };
  },
  mounted() {
    // 毕业院校
    queryDicSelect({ dicTypeUniqueCode: "Education" }).then((res) => {
      this.educations = res.data;
    });
    // 学历
    queryDicSelect({ dicTypeUniqueCode: "AcademicDegree" }).then((res) => {
      this.academicDegrees = res.data;
    });
    // 籍贯
    queryDicTreeSelect({ dicTypeUniqueCode: "Aationality" }).then((res) => {
      this.nationalitys = res.data;
    });
    this.loadData();
  },
  methods: {
    // 图片回调
    imgUploadCallBack(imgList) {
      this.fileList = imgList;
    },
    //#region 加载数据
    loadData() {
      this.form.resetFields(); // 重置参数值
      //修改，详情获取详细信息
      let that = this;

      getSysAdmin({ id: this.$store.state.user.id }).then((res) => {
        that.entity = res.data;
        var setData = {};
        Object.keys(that.form.getFieldsValue()).forEach((item) => {
          setData[item] = that.entity[item];
        });

        if (that.entity.avatar) {
          that.fileList = [
            {
              uid: "-1",
              name: "image.png",
              status: "done",
              url: that.entity.avatar,
              thumbUrl: that.entity.avatar,
            },
          ];
        }
        that.form.setFieldsValue(setData);
      });
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this;
      this.form.validateFields((errors, values) => {
        if (!errors) {
          that.entity = Object.assign(that.entity, that.form.getFieldsValue());
          that.entity.avatar = that.fileList[0]?.thumbUrl;
          delete that.entity.roleName;
          delete that.entity.organizeName;
          delete that.entity.postationName;

          updateSysAdmin(that.entity).then((res) => {
            that.submitResult(res);
          });
        }
      });
    },
    // 保存结果
    submitResult(res) {
      if (res.success) {
        this.$notification.success({ description: res.msg });
        if (!this.hasClose) {
          this.$emit("handleRefresh");
        }
      } else {
        this.$notification.error({ description: res.msg });
      }
    },
    //#endregion
  },
};
</script>
 